<template>
    <div class="LoginBox">
        <!--头部区域-->
        <van-nav-bar title="会员登陆" left-arrow @click-left="$router.go(-1)" />
        <!--内容区域-->
        <div class="LoginComtent">
            <h2>手机号登陆</h2>
            <h4>未注册的手机号登陆后将自动注册</h4>
            <div class="inputBox">
                <input type="number" placeholder="请输入手机号码" v-model="mobile">
            </div>
            <div class="inputBox">
                <input type="text" placeholder="请输入图形验证码" v-model="picCode">
                <div class="right" v-if="picUrl" @click="getpicCode">
                    <img :src="picUrl" alt="">
                </div>
            </div>
            <div class="inputBox">
                <input type="text" placeholder="请输入短信验证码" v-model="msgCode">
                <div class="right" @click="getCode">
                    <span>{{ total == defultTotal ? '获取验证码' : `${total}` + '秒后重新发送' }}</span>
                </div>
            </div>
            <!--底部区域-->
            <div class="footer" @click="login">
                登陆
            </div>
        </div>


    </div>
</template>
<script>
import { getpicCode, getMsg, codeLogin } from '@/api/login'
export default {
    name: 'loginIndex',

    data() {
        return {
            mobile: '15751776629',   //手机号码
            picCode: '', //用户输入的图形验证码
            picKey: '',  //图形验证码唯一标识符
            picUrl: '',  //图形验证码图片地址
            total: 60, //当前倒计时时间
            defultTotal: 60, //默认倒计时时间
            Interval: null, //定时器ID
            verifyCode: '', //短信验证码
            msgCode: '246810',    //用户输入的短信验证码
            userData: {}  //用户信息
        };
    },

    created() {
        this.getpicCode()
    },
    mounted() {
        // console.log('11111', this.$store.state);
    },
    methods: {
        //请求图形验证码
        async getpicCode() {
            const res = await getpicCode()
            this.picKey = res.data.key  //储存地址
            this.picUrl = res.data.base64  //存储唯一标识符
        },
        //验证是否正确输入手机号和图形验证码
        verify() {
            //校验输入框内容
            if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
                this.$toast('请输入正确的手机号码')
                return false
            }
            if (!/^\w{4}$/.test(this.picCode)) {
                this.$toast('请输入正确的图形验证码')
                return false
            }
            return true
        },
        //获取短信验证码
        async getCode() {
            if (!this.verify()) {
                return
            }
            //防止再次点击时,定时器会重新开启 造成混乱
            if (!this.Interval && this.total == this.defultTotal) {
                await getMsg(this.picCode, this.picKey, this.mobile)
                // console.log(res)
                this.Interval = setInterval(() => {
                    this.total--
                    if (this.total <= 0) {
                        clearInterval(this.Interval) //清除定时器
                        this.Interval = null   //重置定时器
                        this.total = this.defultTotal  //归位
                    }
                }, 1000)
            }

        },
        //登陆跳转
        async login() {
            if (!this.verify()) {
                return
            }
            if (!/^\d{6}$/.test(this.msgCode)) {
                this.$toast('请输入正确的短信验证码')
                return
            }
            const res = await codeLogin(this.mobile, this.msgCode)
            console.log(res.data)
            this.userData = {
                userId: res.data.userId,
                token: res.data.token,
                islogin: true
            }
            console.log(this.userData)
            // 存入用户ID和token数据到Vuex中
            this.$store.commit('user/setUser', this.userData)
            this.$toast('登陆成功')
            this.$router.go(-1) //返回上一页

        }
    },
    destroyed() {
        clearInterval(this.Interval) //清除定时器
    },
};
</script>
<style lang="scss" scoped>
.LoginBox {
    width: 100vw;

    .LoginComtent {
        padding: 0 20px;
        margin-top: 50px;

        h4 {
            // font-size: 12px;
            color: #9c9999;

        }

        .inputBox {
            height: 50px;
            margin: 40px 0;
            // border: 1px solid red;
            display: flex;
            justify-content: space-between;

            input {
                border: transparent;
                height: 50px;
                // width: calc(100% - 49%)px;
            }

            .right {
                // border: 1px solid blue;
                width: 100px;
                height: 50px;
                line-height: 50px;
                font-size: 12px;

                span {
                    color: #f1ab41;
                }

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }
        }

        .footer {
            width: 100%;
            height: 50px;
            background-color: #f1a53d;
            border-radius: 20px;
            text-align: center;
            line-height: 50px;
            font-size: 18px;
            color: rgb(252, 253, 253);
        }

    }
}
</style>